<template>
  <div id="member-safe" v-loading="loading">
    <div class="edit" v-if="type == 'password'">
      <div class="title"> {{ $t('member.safe.index.modifyLoginPassword') }}</div>
      <div class="pass-form" >
        <el-form :model="loginForm" :rules="loginRules" ref="loginRef" label-width="100px">
          <el-form-item :label="$t('member.safe.index.cellphoneNumber') ">
            <div>{{memberInfo.mobile}}</div>
          </el-form-item>
          <el-form-item :label="$t('member.safe.index.oldPassword') " prop="old_password">
            <div class="form-input">
              <el-input type="password" :placeholder="$t('member.safe.index.currentPassword') " v-model="loginForm.old_password"></el-input>
            </div>
          </el-form-item>
          <el-form-item :label="$t('member.safe.index.newPassword') " prop="new_password">
            <div class="form-input">
              <el-input type="password" :placeholder="$t('member.safe.index.inewPassword') " v-model="loginForm.new_password"></el-input>
            </div>
          </el-form-item>
          <el-form-item :label="$t('member.safe.index.dynamicVerificationCode') " prop="captcha_code">
            <div class="form-input">
              <el-input type="password" :placeholder="$t('member.safe.index.verificationCode') " v-model="loginForm.captcha_code"></el-input>
              <img :src="captcha.img" mode class="captcha-img" @click="getCaptcha" />
            </div>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="edit" v-if="type == 'email'">
      <div class="title"> {{ $t('member.safe.index.bindMailbox') }}</div>
      <div class="pass-form">
        <el-form :model="emailForm" :rules="emailRules" ref="emailRef" label-width="130px">
          <el-form-item :label="$t('member.safe.index.newEmail') " prop="email">
            <div class="form-input">
              <el-input type="text" :placeholder="$t('member.safe.index.iNewEmailAddress') " v-model="emailForm.email"></el-input>
            </div>
          </el-form-item>
          <el-form-item :label="$t('member.safe.index.dynamicVerificationCode') " prop="captcha_code">
            <div class="form-input">
              <el-input type="text" :placeholder="$t('member.safe.index.verificationCode') " v-model="emailForm.captcha_code"></el-input>
              <img :src="captcha.img" mode class="captcha-img" @click="getCaptcha" />
            </div>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="edit" v-if="type == 'tell'">
      <div class="title"> {{ $t('member.safe.index.bindMobilePhoneNumber') }}</div>
      <div class="pass-form">
        <el-form :model="mobileForm" :rules="mobileRules" ref="mobileRef" label-width="130px">
          <el-form-item :label="$t('member.safe.index.cellphoneNumber') ">
            <div>{{memberInfo.mobile}}</div>
          </el-form-item>
          <el-form-item :label="$t('member.safe.index.areaCode') " class="">
						<div class="form-label">
							<div class="compony" @click="showCounty = !showCounty">
								+{{nationality?nationality:$t('member.safe.index.areaCode') }}
								<i class="el-icon-arrow-up" v-show="showCounty" style="color:#ccc;"></i>
								<i class="el-icon-arrow-down" v-show="!showCounty" style="color:#ccc;"></i>
							</div>
							<transition name="el-fade-in-linear">
								<div class="country-ul" v-show="showCounty">
									<div class="country-li" v-for="(obj,i) in countryAry" :key="i" @click.stop="setCountry(obj)">
										<div class="li-name">{{obj.name}}  <span style="color: #92969E;">+{{obj.tel}}</span></div>
									</div>
								</div>
							</transition>
						</div>
					</el-form-item>
          <el-form-item :label="$t('member.safe.index.newPhone') " prop="mobile">
            <div class="form-input">
              <el-input type="text" :placeholder="$t('member.safe.index.iNewPhoneNumber') " v-model="mobileForm.mobile"></el-input>
            </div>
          </el-form-item>
          <el-form-item :label="$t('member.safe.index.dynamicVerificationCode') " prop="captcha_code">
            <div class="form-input">
              <el-input type="text" :placeholder="$t('member.safe.index.verificationCode') " v-model="mobileForm.captcha_code"></el-input>
              <img :src="captcha.img" mode class="captcha-img" @click="getCaptcha" />
            </div>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="edit" v-if="type == 'payPassWord'">
      <div class="title"> {{ $t('member.safe.index.bindTransactionPassword') }}</div>
      <div class="pass-form">
        <el-form :model="payForm" :rules="payRules" ref="payRef" label-width="130px">
          <el-form-item :label="$t('member.safe.index.cellphoneNumber') ">
            <div>{{memberInfo.mobile}}</div>
          </el-form-item>
          <el-form-item :label="$t('member.safe.index.resetPaymentPassword') " prop="password">
            <div class="form-input">
              <el-input type="password" maxlength="6" :placeholder="$t('member.safe.index.pleaseEnterA6DigitPassword') " v-model="payForm.password"></el-input>
            </div>
          </el-form-item>
          <el-form-item :label="$t('member.safe.index.repeatPaymentPassword') " prop="rePassword">
            <div class="form-input">
              <el-input type="password" :placeholder="$t('member.safe.index.repeatPaymentPassword') " v-model="payForm.rePassword"></el-input>
            </div>
          </el-form-item>
          <el-form-item :label="$t('member.safe.index.dynamicVerificationCode') " prop="captcha_code">
            <div class="form-input">
              <el-input type="text" :placeholder="$t('member.safe.index.verificationCode') " v-model="payForm.captcha_code"></el-input>
              <img :src="captcha.img" mode class="captcha-img" @click="getCaptcha" />
            </div>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="safe-footer">
      <el-button type="primary" style="margin-right: 20px;" @click="submitForm()"> {{ $t('member.safe.index.save') }}</el-button>
      <el-button @click="toBack()"> {{ $t('member.safe.index.cancel') }}</el-button>
    </div>
  </div>
</template>

<script>
import { captcha } from "@/api/website"
import { info ,countryFn} from "@/api/member/info"
import { loginFn , payFn, mobileFn, emailFn } from "@/api/member/safe"
export default {	
  data() {
    return {
      type: this.$route.query.type || 'password',
      loginForm: {
				old_password: '',
				new_password: '',
				captcha_id: '',
				captcha_code: '',
			},
      loginRules: {
				old_password: [{
					required: true,
					message: this.$t('member.safe.index.iOriginalPassword'),
					trigger: "blur"
				}],
				new_password: [{
					required: true,
					message: this.$t('member.safe.index.inewPassword'),
					trigger: "blur"
				}],
        captcha_code: [{
					required: true,
					message: this.$t('member.safe.index.pleaseEnterVerificationCode'),
					trigger: "blur"
				}],
			},
      payForm: {
				captcha_id: '',
				captcha_code: '',
				password: '',
        rePassword: '',
			},
      payRules: {
        password: [{
					required: true,
					message: this.$t('member.safe.index.pleaseEnterA6DigitPassword'),
					trigger: "blur"
				}],
				rePassword: [{
					required: true,
					message: this.$t('member.safe.index.resetPaymentPassword'),
					trigger: "blur"
				}],
        captcha_code: [{
					required: true,
					message: this.$t('member.safe.index.pleaseEnterVerificationCode'),
					trigger: "blur"
				}],
      },
      mobileForm: {
				mobile: '',
				captcha_code: '',
				captcha_id: '',
			},
      mobileRules: {
        mobile: [{
					required: true,
					message: this.$t('member.safe.index.iNewPhoneNumber'),
					trigger: "blur"
				}],
        captcha_code: [{
					required: true,
					message: this.$t('member.safe.index.pleaseEnterVerificationCode'),
					trigger: "blur"
				}],
      },
      emailForm: {
				email: '',
				captcha_code: '',
				captcha_id: '',
			},
      emailRules: {
        email: [{
					required: true,
					message: this.$t('member.safe.index.iNewEmailAddress'),
					trigger: "blur"
				}],
        captcha_code: [{
					required: true,
					message: this.$t('member.safe.index.pleaseEnterVerificationCode'),
					trigger: "blur"
				}],
      },
      captcha: {
				id: "",
				img: ""
			}, // 验证码
      memberInfo: {},
      loading: true,
      showCounty: false,
			countryAry: [],
      nationality: '86'
    };
  },
  created() {
    this.getInfo();
    this.getCountry();
    this.getCaptcha();
  },
  mounted() {

  },
  methods: {
    getCountry(){
			countryFn().then(res=>{
				if(res.code == 0){
					this.countryAry = res.data;
				}
			})
		},
    // 获取区号
		setCountry(obj){
			this.nationality = obj.tel;
			this.showCounty = false;
		},
    // 取消
    toBack(){
      this.$router.replace({path: 'security'})
    },
    async getInfo() {
			await info()
      .then(res => {
        if (res.code == 0) {
          this.memberInfo = res.data
        }
        this.loading = false
      })
      .catch(err => {
        this.loading = false
        this.$message.error(err.message)
      })
		},
    /**
		 * 获取验证码
		 */
		getCaptcha() {
			captcha({
        captcha_id: this.captcha.id
      })
      .then(res => {
        if (res.code >= 0) {
          this.captcha.id = res.data.id
          this.captcha.img = res.data.img
          this.captcha.img = this.captcha.img.replace(/\r\n/g, "")
          if(this.type == 'password') {
            this.loginForm.captcha_id = this.captcha.id;
          }else if(this.type == 'payPassWord'){
            this.payForm.captcha_id = this.captcha.id;
          }else if(this.type == 'tell'){
            this.mobileForm.captcha_id = this.captcha.id;
          }else if(this.type == 'email'){
            this.emailForm.captcha_id = this.captcha.id;
          }
        }
      })
      .catch(err => {
        this.$message.error(err.message)
      })
		},
    // 提交
    submitForm(){
      if(this.type == 'password'){
        this.$refs.loginRef.validate(valid=>{
          if(valid){
            console.log(JSON.stringify(this.loginForm))
            this.getLogin();
          }else {
            return false;
          }
        })
      }else if(this.type == 'payPassWord'){
        this.$refs.payRef.validate(valid=>{
          if(valid){
            let regNumber = /^\+?[1-9][0-9]*$/; // 正整数
            if(!regNumber.test(this.payForm.password)){
              return this.$message.error(this.$t('member.safe.index.pleaseEnterA6DigitPassword'))
            }
            if(this.payForm.rePassword != this.payForm.password){
              return this.$message.error(this.$t('member.safe.index.inconsistentPaymentPassword'))
            }
            delete this.payForm.rePassword
            // console.log(JSON.stringify(this.payForm))
            this.submitPay();
          }else {
            return false;
          }
        })
      }else if(this.type == 'tell'){
        this.$refs.mobileRef.validate(valid=>{
          if(valid){
            console.log(JSON.stringify(this.mobileForm))
            this.submitMobile();
          }else {
            return false;
          }
        })
      }else if(this.type == 'email'){
        this.$refs.emailRef.validate(valid=>{
          if(valid){
            console.log(JSON.stringify(this.emailForm))
            // this.submitMobile();
          }else {
            return false;
          }
        })
      }

      
    },
    submitEmail(){
      this.loading = true;
      emailFn(this.emailForm).then(res=>{
        if(res.code == 0){
          this.$message.success(this.$t('member.safe.index.submittedSuccessfully'))
          this.toBack();
        }else {
          this.getCaptcha();
          this.$message.error(res.message)
        }
        this.loading = false;
      }).catch(err => {
        this.getCaptcha();
        this.loading = false;
        this.$message.error(err.message)
      })
    },
    submitMobile(){
      this.loading = true;
      mobileFn(this.mobileForm).then(res=>{
        if(res.code == 0){
          this.$message.success(this.$t('member.safe.index.submittedSuccessfully'))
          this.toBack();
        }else {
          this.getCaptcha();
          this.$message.error(res.message)
        }
        this.loading = false;
      }).catch(err => {
        this.getCaptcha();
        this.loading = false;
        this.$message.error(err.message)
      })
    },
    // 支付密码提交
    submitPay(){
      this.loading = true;
      payFn(this.payForm).then(res => {
        if(res.code == 0){
          this.$message.success(this.$t('member.safe.index.submittedSuccessfully'))
          this.toBack();
        }else {
          this.getCaptcha();
          this.$message.error(res.message)
        }
        this.loading = false;
      }).catch(err => {
        this.getCaptcha();
        this.loading = false;
        this.$message.error(err.message)
      })
    },
    // 登录提交
    getLogin(){
      this.loading = true;
      loginFn(this.loginForm).then(res=>{
        if(res.code == 0){
          this.$message.success(this.$t('member.safe.index.submittedSuccessfully'))
          this.toBack();
        }else {
          this.getCaptcha();
          this.$message.error(res.message)
        }
        this.loading = false;
      }).catch(err => {
        this.getCaptcha();
        this.loading = false;
        this.$message.error(err.message)
      })
    },
  }
};
</script>

<style lang="scss">
  #member-safe {
    .el-input__inner {
      border: none;
      
    }
  }
</style>

<style scoped lang="scss">
  #member-safe {
	  background: #ffffff;
	.el-form {
		margin: 0 30px;
		.captcha {
			vertical-align: top;
			max-width: inherit;
			width: 74px;
			max-height: 38px;
			line-height: 38px;
			cursor: pointer;
		}
	}
	.item {
		border-bottom: 1px solid #f1f1ff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20px;
		.item-content {
			display: flex;
			align-items: center;
			i {
				font-size: 40px;
			}
			.name-wrap {
				margin-left: 20px;
			}
		}
	}
	.edit {
		padding: 20px;
		.title {
			padding-bottom: 5px;
			font-size: $ns-font-size-base;
			border-bottom: 1px solid #f1f1f1;
		}
		.pass-form {
			margin-top: 20px;
			display: flex;
			justify-content: center;
			.el-form {
				width: 500px;
			}
      .form-label {
        // margin-left: 10px;
        position: relative;
        .compony {
          color: #FF547B;
          width: 400px;
          height: 40px;
          border: 1px solid #DCDFE6;
          border-radius: 4px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 0px 15px;
          box-sizing: border-box;
        }
        .country-ul {
          position: absolute;
          left: 0px;
          top: 40px;
          width: 360px;
          height: 300px;
          overflow: auto;
          background-color: rgb(255, 255, 255);
          box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 12px 0px;
          z-index: 11;
          .country-li {
            padding: 0px 16px;
            box-sizing: border-box;
          }
          .country-li:hover {
            background: #F7F7F7;
            .li-name {
              color: #FF547B;
            }
          }
        }
      }
      .form-input {
        display: flex;
        align-items: center;
        width: 400px;
        height: 40px;
        border: 1px solid #DCDFE6;
        border-radius: 4px;
        
        .captcha-img {
          vertical-align: top;
					max-width: inherit;
					max-height: 40px;
					line-height: 40px;
					cursor: pointer;
        }
      }
		}
		.btn {
			display: flex;
			justify-content: center;
		}
	}
	.tell-pass {
		margin-top: 20px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		.el-form {
			width: 500px;
		}
		.tell-code {
			margin-left: 66px;
			margin-bottom: 20px;
		}
	}
	.edit-pay {
		padding: 20px;
		text-align: center;
		.title {
			font-size: $ns-font-size-base;
			border-bottom: 1px solid #f1f1f1;
			text-align: left;
			padding-bottom: 5px;
		}
		.dynacode {
			cursor: pointer;
			text-align: right;
			margin-right: 329px;
			color: $base-color;
			margin-bottom: 20px;
		}
		.el-input {
			width: 300px;
			margin-top: 20px;
		}
		.btn {
			margin-top: 20px;
		}
		.name {
			margin-top: 10px;
		}
	}

  .safe-footer {
    display: flex;
		justify-content: center;
    padding-bottom: 40px;
  }
}
</style>
